/* ========== 基础显示类型 ========== */
/* display */
.d-f { display: flex; }
.d-g { display: grid; }
.d-ig { display: inline-grid; }
.d-b { display: block; }
.d-ib { display: inline-block; }
.d-i { display: inline; }
.d-n { display: none; }

/* ========== Flex布局 ========== */
/* flex */
.f-1 { flex: 1; }
.f-2 { flex: 2; }
.f-3 { flex: 3; }
.f-n { flex: none; }
.f-a { flex: auto; }

/* flex-direction */
.fd-r { flex-direction: row; }
.fd-c { flex-direction: column; }
.fd-rr { flex-direction: row-reverse; }
.fd-cr { flex-direction: column-reverse; }

/* flex-wrap */
.fw-n { flex-wrap: nowrap; }
.fw-r { flex-wrap: wrap-reverse; }

/* justify-content */
.jc-c { justify-content: center; }
.jc-s { justify-content: flex-start; }
.jc-e { justify-content: flex-end; }
.jc-b { justify-content: space-between; }
.jc-a { justify-content: space-around; }
.jc-v { justify-content: space-evenly; }

/* align-items */
.ai-c { align-items: center; }
.ai-s { align-items: flex-start; }
.ai-e { align-items: flex-end; }
.ai-b { align-items: baseline; }
.ai-t { align-items: stretch; }

/* 组合样式 */
.fcc { display: flex; align-items: center; justify-content: center; }
.fcs { display: flex; align-items: center; justify-content: flex-start; }
.fce { display: flex; align-items: center; justify-content: flex-end; }
.fcb { display: flex; align-items: center; justify-content: space-between; }

/* ========== Grid布局 ========== */
/* grid相关 */
.gap-10 { gap: 10rpx; }
.gap-16 { gap: 16rpx; }
.gap-20 { gap: 20rpx; }
.gap-24 { gap: 24rpx; }
.gap-32 { gap: 32rpx; }

/* ========== 定位系统 ========== */
/* position */
.pos-r { position: relative; }
.pos-a { position: absolute; }
.pos-f { position: fixed; }
.pos-s { position: sticky; }
.pos-st { position: static; }

/* top */
.t-0 { top: 0; }
.t-600 { top: 600rpx; }
.t-50 { top: 50%; }

/* right */
.r-0 { right: 0; }
.r-50 { right: 50%; }

/* bottom */
.b-0 { bottom: 0; }
.b-50 { bottom: 50%; }

/* left */
.l-0 { left: 0; }
.l-50 { left: 50%; }

/* z-index */
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-99 { z-index: 99; }
.z-100 { z-index: 100; }
.z-999 { z-index: 999; }

/* 组合定位 */
.full { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.cent { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.centx { position: absolute; left: 50%; transform: translateX(-50%); }
.centy { position: absolute; top: 50%; transform: translateY(-50%); }

/* ========== 文本样式 ========== */
/* text-align */
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-l { text-align: left; }

/* text-decoration */
.td-l { text-decoration: line-through; }

/* font-weight */
.fw-1 { font-weight: 100; }
.fw-3 { font-weight: 300; }
.fw-4 { font-weight: 400; }
.fw-5 { font-weight: 500; }
.fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; }
.fw-9 { font-weight: 900; }

/* font-size */
.fs-24 { font-size: 24rpx; }
.fs-26 { font-size: 26rpx; }
.fs-28 { font-size: 28rpx; }
.fs-30 { font-size: 30rpx; }
.fs-32 { font-size: 32rpx; }
.fs-36 { font-size: 36rpx; }
.fs-40 { font-size: 40rpx; }
.fs-44 { font-size: 44rpx; }
.fs-48 { font-size: 48rpx; }
.fs-60 { font-size: 60rpx; }

/* line-height */
.lh-1 { line-height: 1; }
.lh-12 { line-height: 1.2; }
.lh-15 { line-height: 1.5; }
.lh-28 { line-height: 28rpx; box-sizing: border-box; }
.lh-34 { line-height: 34rpx; box-sizing: border-box; }
.lh-36 { line-height: 36rpx; box-sizing: border-box; }
.lh-40 { line-height: 40rpx; box-sizing: border-box; }
.lh-42 { line-height: 42rpx; box-sizing: border-box; }
.lh-48 { line-height: 48rpx; box-sizing: border-box; }
.lh-54 { line-height: 54rpx; box-sizing: border-box; }
.lh-56 { line-height: 56rpx; box-sizing: border-box; }
.lh-60 { line-height: 60rpx; box-sizing: border-box; }
.lh-64 { line-height: 64rpx; box-sizing: border-box; }
.lh-70 { line-height: 70rpx; box-sizing: border-box; }
.lh-72 { line-height: 72rpx; box-sizing: border-box; }
.lh-80 { line-height: 80rpx; box-sizing: border-box; }
.lh-120 { line-height: 120rpx; box-sizing: border-box; }
.lh-168 { line-height: 168rpx; box-sizing: border-box; }
.lh-330 { line-height: 330rpx; box-sizing: border-box; }

/* 文本溢出 */
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ell-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ell-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ell-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ========== 颜色样式 ========== */
/* color */
.c-fff { color: #ffffff; }
.c-ccc { color: #cccccc; }
.c-999 { color: #999999; }
.c-666 { color: #666666; }
.c-333 { color: #333333; }
.c-000 { color: #000000; }
.c-gre { color: #27c1a5; }
.c-yel { color: #fea20d; }
.c-red { color: #ff5967; }
.c-bla { color: #303133; }
.c-blu { color: #409eff; }
.c-ora { color: #e6a23c; }
.c-gre { color: #13ce66; }

/* ========== 背景样式 ========== */
/* background */
.bg-whi { background: #ffffff; }
.bg-gry { background: #f2f2f2; }
.bg-red { background: #ff5967; }
.bg-gre { background: #27c1a5; }
.bg-blu { background: #409eff; }
.bg-yel { background: #fea20d; }
.bg-gre { background: #13ce66; }
.bg-bla { background: #000000; }
.bg-lg { background: linear-gradient(to bottom, #fea20d, #ffffff); }

/* ========== 间距样式 - 外边距 ========== */
/* margin */
.m-a { margin: auto; }

/* margin-top */
.mt-0 { margin-top: 0 !important; }
.mt-6 { margin-top: 6rpx; }
.mt-8 { margin-top: 8rpx; }
.mt-10 { margin-top: 10rpx; }
.mt-12 { margin-top: 12rpx; }
.mt-16 { margin-top: 16rpx; }
.mt-20 { margin-top: 20rpx; }
.mt-24 { margin-top: 24rpx; }
.mt-30 { margin-top: 30rpx; }
.mt-32 { margin-top: 32rpx; }
.mt-40 { margin-top: 40rpx; }
.mt-60 { margin-top: 60rpx; }
.mt-80 { margin-top: 80rpx; }
.mt-100 { margin-top: 100rpx; }

/* margin-bottom */
.mb-10 { margin-bottom: 10rpx; }
.mb-16 { margin-bottom: 16rpx; }
.mb-20 { margin-bottom: 20rpx; }
.mb-24 { margin-bottom: 24rpx; }
.mb-30 { margin-bottom: 30rpx; }
.mb-32 { margin-bottom: 32rpx; }
.mb-40 { margin-bottom: 40rpx; }

/* margin-right */
.mr-4 { margin-right: 4rpx; }
.mr-6 { margin-right: 6rpx; }
.mr-10 { margin-right: 10rpx; }
.mr-12 { margin-right: 12rpx; }
.mr-24 { margin-right: 24rpx; }

/* margin-left */
.ml-2 { margin-left: 2rpx; }
.ml-4 { margin-left: 4rpx; }
.ml-5 { margin-left: 5rpx; }
.ml-10 { margin-left: 10rpx; }
.ml-20 { margin-left: 20rpx; }

/* margin horizontal */
.mh-10 { margin-left: 10rpx; margin-right: 10rpx; }
.mh-16 { margin-left: 16rpx; margin-right: 16rpx; }
.mh-20 { margin-left: 20rpx; margin-right: 20rpx; }
.mh-24 { margin-left: 24rpx; margin-right: 24rpx; }
.mx-a { margin-left: auto; margin-right: auto; }

/* margin vertical */
.mv-8 { margin-top: 8rpx; margin-bottom: 8rpx; }
.mv-16 { margin-top: 16rpx; margin-bottom: 16rpx; }
.mv-24 { margin-top: 24rpx; margin-bottom: 24rpx; }
.my-a { margin-top: auto; margin-bottom: auto; }

/* ========== 间距样式 - 内边距 ========== */
/* padding */
.p-20 { padding: 20rpx; box-sizing: border-box; }
.p-24 { padding: 24rpx; box-sizing: border-box; }
.p-32 { padding: 32rpx; box-sizing: border-box; }
.p-40 { padding: 40rpx; box-sizing: border-box; }

/* padding-top */
.pt-6 { padding-top: 6rpx; box-sizing: border-box; }
.pt-10 { padding-top: 10rpx; box-sizing: border-box; }
.pt-16 { padding-top: 16rpx; box-sizing: border-box; }
.pt-20 { padding-top: 20rpx; box-sizing: border-box; }
.pt-24 { padding-top: 24rpx; box-sizing: border-box; }
.pt-28 { padding-top: 28rpx; box-sizing: border-box; }
.pt-170 { padding-top: 170rpx; box-sizing: border-box; }

/* padding-bottom */
.pb-6 { padding-bottom: 6rpx; box-sizing: border-box; }
.pb-10 { padding-bottom: 10rpx; box-sizing: border-box; }
.pb-12 { padding-bottom: 12rpx; box-sizing: border-box; }
.pb-16 { padding-bottom: 16rpx; box-sizing: border-box; }
.pb-24 { padding-bottom: 24rpx; box-sizing: border-box; }
.pb-28 { padding-bottom: 28rpx; box-sizing: border-box; }
.pb-32 { padding-bottom: 32rpx; box-sizing: border-box; }

/* padding-left */
.pl-10 { padding-left: 10rpx; box-sizing: border-box; }
.pl-16 { padding-left: 16rpx; box-sizing: border-box; }
.pl-24 { padding-left: 24rpx; box-sizing: border-box; }

/* padding-right */
.pr-10 { padding-right: 10rpx; box-sizing: border-box; }
.pr-16 { padding-right: 16rpx; box-sizing: border-box; }
.pr-24 { padding-right: 24rpx; box-sizing: border-box; }

/* padding horizontal */
.ph-12 { padding-right: 12rpx; padding-left: 12rpx; box-sizing: border-box; }
.ph-16 { padding-right: 16rpx; padding-left: 16rpx; box-sizing: border-box; }
.ph-24 { padding-right: 24rpx; padding-left: 24rpx; box-sizing: border-box; }
.ph-32 { padding-right: 32rpx; padding-left: 32rpx; box-sizing: border-box; }
.ph-50 { padding-right: 50rpx; padding-left: 50rpx; box-sizing: border-box; }

/* padding vertical */
.pv-8 { padding-bottom: 8rpx; padding-top: 8rpx; box-sizing: border-box; }
.pv-10 { padding-bottom: 10rpx; padding-top: 10rpx; box-sizing: border-box; }
.pv-12 { padding-bottom: 12rpx; padding-top: 12rpx; box-sizing: border-box; }
.pv-16 { padding-bottom: 16rpx; padding-top: 16rpx; box-sizing: border-box; }
.pv-24 { padding-bottom: 24rpx; padding-top: 24rpx; box-sizing: border-box; }
.pv-32 { padding-bottom: 32rpx; padding-top: 32rpx; box-sizing: border-box; }

/* ========== 尺寸样式 ========== */
/* width */
.wp-20 { width: 20%; }
.wp-25 { width: 25%; }
.wp-28 { width: 28%; }
.wp-30 { width: 30%; }
.wp-33 { width: calc(100% / 3); }
.wp-40 { width: 40%; }
.wp-50 { width: 50%; }
.wp-60 { width: 60%; }
.wp-65 { width: 65%; }
.wp-80 { width: 80%; }
.wp-100 { width: 100%; }
.w-85v { width: 85vw; }
.wc-64 { width: calc(100% - 64rpx); }
.wc-100 { width: calc(100% - 100rpx); }
.wc-130 { width: calc(100% - 130rpx); }
.wc-140 { width: calc(100% - 140rpx); }
.wc-160 { width: calc(100% - 160rpx); }
.wc-200 { width: calc(100% - 200rpx); }
.wc-260 { width: calc(100% - 260rpx); }
.wc-280 { width: calc(100% - 280rpx); }
.wc-320 { width: calc(100% - 320rpx); }
.w-24 { width: 24rpx; }
.w-36 { width: 36rpx; }
.w-48 { width: 48rpx; }
.w-64 { width: 64rpx; }
.w-70 { width: 70rpx; }
.w-100 { width: 100rpx; }
.w-130 { width: 130rpx; }
.w-140 { width: 140rpx; }
.w-144 { width: 144rpx; }
.w-150 { width: 150rpx; }
.w-160 { width: 160rpx; }
.w-200 { width: 200rpx; }
.w-240 { width: 240rpx; }
.w-260 { width: 260rpx; }
.w-300 { width: 300rpx; }
.w-400 { width: 400rpx; }
.w-500 { width: 500rpx; }

/* height */
.hp-25 { height: 25%; }
.hp-33 { height: calc(100% / 3); }
.hp-50 { height: 50%; }
.hp-100 { height: 100%; }
.hc-100 { height: calc(100% - 100rpx); }
.hc-120 { height: calc(100% - 120rpx); }
.h-1 { height: 1rpx; }
.h-24 { height: 24rpx; }
.h-48 { height: 48rpx; }
.h-56 { height: 56rpx; }
.h-64 { height: 64rpx; }
.h-70 { height: 70rpx; }
.h-80 { height: 80rpx; }
.h-100 { height: 100rpx; }
.h-120 { height: 120rpx; }
.h-168 { height: 168rpx; }
.h-180 { height: 180rpx; }
.h-200 { height: 200rpx; }
.h-276 { height: 276rpx; }
.h-330 { height: 330rpx; }
.h-360 { height: 360rpx; }
.h-400 { height: 400rpx; }
.h-600 { height: 600rpx; }
.h-800 { height: 800rpx; }
.h-1000 { height: 1000rpx; }
.h-a { height: auto; }
/* ========== 边框系统 ========== */
/* border */
.bd { border: 1rpx solid #e5e5e5; }
.bdb { border-bottom: 1rpx solid #e5e5e5; }
.bdt { border-top: 1rpx solid #e5e5e5; }
.bdl { border-left: 1rpx solid #e5e5e5; }
.bdr { border-right: 1rpx solid #e5e5e5; }

/* border-radius */
.br-f { border-radius: 50%; }
.br-0 { border-radius: 0; }
.br-4 { border-radius: 4rpx; }
.br-8 { border-radius: 8rpx; }
.br-16 { border-radius: 16rpx; }
.br-24 { border-radius: 24rpx; }
.br-28 { border-radius: 18rpx; }
.br-32 { border-radius: 32rpx; }

/* ========== 溢出控制 ========== */
/* overflow */
.of-a { overflow: auto; }
.of-h { overflow: hidden; }
.of-s { overflow: scroll; }
.ofx-a { overflow-x: auto; }
.ofx-h { overflow-x: hidden; }
.ofx-s { overflow-x: scroll; }
.ofy-a { overflow-y: auto; }
.ofy-h { overflow-y: hidden; }
.ofy-s { overflow-y: scroll; }

/* 隐藏滚动条 */
.noscr {
  -ms-overflow-style: none; scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

/* ========== 显示控制 ========== */
/* visibility */
.vis-h { visibility: hidden; }
.vis-v { visibility: visible; }

/* opacity */
.op-0 { opacity: 0; }
.op-5 { opacity: 0.5; }
.op-8 { opacity: 0.8; }
.op-10 { opacity: 1; }

/* ========== 交互状态 ========== */
/* cursor */
.cur-p { cursor: pointer; }
.cur-d { cursor: default; }
.cur-na { cursor: not-allowed; }
.cur-w { cursor: wait; }
.cur-t { cursor: text; }
.cur-m { cursor: move; }

/* user-select */
.usel-n { user-select: none; }
.usel-t { user-select: text; }
.usel-a { user-select: all; }

/* ========== 阴影 ========== */
/* box-shadow */
.bs-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.bs-2 { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.bs-3 { box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.bs-n { box-shadow: none; }

/* ========== 过渡 ========== */
/* transition */
.trans { transition: all 0.15s ease; }
.trans-n { transition: none; }

/* ========== 变换 ========== */
/* transform */
.ts-s0 { transform: scale(0); }
.ts-s1 { transform: scale(1); }
.ts-s { transform: scale(1.05); }
.ts-r90 { transform: rotate(90deg); }
.ts-r180 { transform: rotate(180deg); }

/* ========== 其他常用样式 ========== */
/* box-sizing */
.bbox { box-sizing: border-box; }
.footer { bottom: 0; left: 0; position: absolute; border-top: 1px solid #eee; box-sizing: border-box; padding: 24rpx; background: #fff; width: 100%; }
